@message-border-radius: 18px;
@shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
@border-color: #e8e8e8;

// 混合函数
.flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-bubble(@bg-color, @text-color, @border-radius-top, @border-radius-bottom) {
  background: @bg-color;
  color: @text-color;
  border-radius: @border-radius-top @border-radius-top @border-radius-bottom @border-radius-bottom;
  padding: 12px 16px;
  box-shadow: @shadow-light;
}

.flex-column() {
  display: flex;
  flex-direction: column;
}

.contentRight {
  width: fit-content;
  align-self: flex-end;
}

.content {
  margin: 6px 0;
  padding: 6px 18px;
  width: fit-content;
}

.chatContainer {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  height: 100%;
}

.layout {
  overflow: hidden;
  width: 800px;
  margin: 0 auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 100%;

  .chatCard {
    height: 100%;
    border-radius: 0;
    .flex-column();
  }
}

.contentFlex {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0; 0; 0; 0.08);
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.aiContent {
  flex: 1;
  overflow-y: auto;

  // 空状态
  .emptyState {
    .flex-column();
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
  }

  // 滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;

    &:hover {
      background: #a8a8a8;
    }
  }
}

.footerBox {
  padding: 16px 24px;
  background: white;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 12px;
  align-items: flex-end;

  .ant-input {
    border-radius: 8px;
    resize: none;
  }

  .sendButton {
    border-radius: 8px;
    height: 40px;
    min-width: 80px;
  }
}

// 消息样式
.message {
  margin-bottom: 16px;
  animation: fadeIn 0.3s ease-in-out;

  .message-content {
    max-width: 80%;
  }

  // 用户消息
  &.userMessage {
    display: flex;
    justify-content: flex-end;

    .messageContent {
      .message-bubble(white, @text-color, @message-border-radius, 4px);
      box-shadow: @shadow-light;
      border-radius: 10px;
    }

    .messageBody {
      code {
        background: rgba(255, 255, 255, 0.2);
      }

      span {
        color: #000;
      }

      pre {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);

        code {
          background: none;
          color: white;
        }
      }
    }
  }

  // AI消息
  &.aiMessage {
    display: flex;
    justify-content: flex-start;

    .messageContent {
      .message-bubble(white, @text-color, @message-border-radius, 4px);
      border: 1px solid @border-color;
    }

    .messageBody {
      code {
        background: rgba(255, 255, 255, 0.2);
      }

      pre {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);

        code {
          background: none;
          color: white;
        }
      }
    }
  }

  .messageHeader {
    margin-bottom: 8px;
  }

  .messageBody {
    line-height: 1.6;

    p {
      margin: 0 0 8px 0;

      &:last-child {
        margin-bottom: 0;
      }
    }

    code {
      background: #f5f5f5;
      padding: 2px 4px;
      border-radius: 4px;
      font-size: 0.9em;
    }

    pre {
      background: #f6f8fa;
      border: 1px solid #e1e4e8;
      border-radius: 6px;
      padding: 12px;
      overflow-x: auto;
      margin: 8px 0;

      code {
        background: none;
        padding: 0;
      }
    }

    ul,
    ol {
      margin: 8px 0;
      padding-left: 20px;
    }

    li {
      margin: 4px 0;
    }

    blockquote {
      border-left: 4px solid @primary-color;
      margin: 8px 0;
      padding-left: 12px;
      color: #666;
    }
  }
}